<!--
  * 车牌新增
  *
-->
<template>
    <a-modal :title="'轮播'" :width="500" v-model:visible="visible"  @ok="onSubmit">
      <a-table
        size="small"
        :dataSource="tableData"
        :columns="columns"
        :pagination="false"
        :loading="tableLoading"
        :scroll="{y:400}"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        bordered
      >
      </a-table>
      设置视频轮播时长:<a-input-number placeholder="单位秒" v-model:value="secondsConut" style="width: 200px;"></a-input-number>(默认10秒)
    </a-modal>
  </template>
  <script setup>
    import { ref, nextTick, reactive,onMounted } from 'vue';
    import { serverUrlApi } from '/@/api/videoMonitoring/index';
    const tableLoading = ref(false);
    const tableData = ref([]);
    const secondsConut = ref("");
    const columns = ref([
      {
        title: 'IP',
        dataIndex: 'ip',
        // minWidth: 180,
        ellipsis: true,
      },
      {
        title: '名称',
        dataIndex: 'title',
        // minWidth: 100,
      }
    ]);
    const queryFormState = {
      carCode: '',
      tag:'',
      type:0,
      pageNum: 1,
      pageSize: 10,
      // searchCount: true,
    };
    const queryForm = reactive({ ...queryFormState });
  
    // emit
    const emit = defineEmits(['change']);
  
    // 是否展示抽屉
    const visible = ref(false);

    const selectedRowKeys = ref([])
  const onSelectChange = (keys) => {
    selectedRowKeys.value = keys;
  };
    
  function showDrawer(data){
    visible.value = true;
    // tableData.value = data
  }
  function onClose() {
    visible.value = false;
  }
  function onSubmit(){
    if(selectedRowKeys.value.length){
    
      let list = tableData.value.filter(element=>selectedRowKeys.value.includes(element.key))
     
      emit('change',list,secondsConut.value);
        onClose()
    }
  }

  function getVideoList(data){
    serverUrlApi.videoList(data).then(res=>{
       console.log(res); 
       res.data.list.forEach(item=>item['key'] = item.id)
       tableData.value = res.data.list
    })
  }
  onMounted(()=>{
    getVideoList(queryForm)
  })
  defineExpose({
    showDrawer,
  });
  </script>
  